<template>
  <n-form
      :model="formData"
      :rules="formRules"
      ref="formInstance"
      label-placement="left"
      :label-width="SlashAppContext.getCoefficient()*80 + 'px'">
    <n-grid x-gap="12" :cols="1" responsive="self">
      <n-gi>
        <n-form-item label="部门名称" path="deptName">
          <n-input v-model:value="formData.deptName" placeholder="请输入部门名称"/>
        </n-form-item>
      </n-gi>
      <n-gi>
        <n-form-item label="部门编码" path="deptCode">
          <n-input-group-label v-if="formData.fkParentDeptCode">{{
              formData.fkParentDeptCode
            }}
          </n-input-group-label>
          <n-input maxlength="3" :readonly="runMode=='update'" v-model:value="formData.deptCode"
                   placeholder="请输入部门编码建议字母和数字"/>
        </n-form-item>
      </n-gi>
      <n-gi>
        <n-form-item label="负责人账号" path="fkLeaderUserAccount">
          <n-input v-model:value="formData.fkLeaderUserAccount" placeholder="请输入部门负责人账号"/>
        </n-form-item>
      </n-gi>

    </n-grid>
  </n-form>
</template>
<script lang="ts">
import {onMounted, ref} from "vue";
import {enabledOptions, formRules} from "./Service";
import httpApi from "./httpApi";
import {FormInst} from "naive-ui";
import {SlashAppContext, checkFormData} from "slash-admin";

export default {
  props: {
    id: {
      type: [String, Number],
      default: null
    },
    runMode: {
      type: [String],
      default: "read"
    },
    fkParentDeptCode: {
      type: [String],
      default: ""
    }
  },
  setup: function (props) {
    const formInstance = ref<FormInst | null>(null);
    const formData = ref<any>({
      id: props.id,
      enabled: 1,
      fkParentDeptCode: props.fkParentDeptCode
    });
    const {runMode} = props;
    const init = async () => {
      if (props.id) {
        let msg = await httpApi.selectById(props.id);
        formData.value = msg.data;
      }
    };
    const doSubmit = async () => {
      await checkFormData(formInstance);
      return httpApi.doSaveEntity(formData.value);
    };
    const doUpdate = async () => {
      await checkFormData(formInstance);
      return httpApi.doUpdateEntity(formData.value);
    };
    onMounted(() => {
      init();
    });
    return {
      runMode,
      enabledOptions,
      formData,
      formInstance,
      formRules,
      doSubmit,
      doUpdate,
      SlashAppContext
    };
  }
};
</script>

<style lang="less" scoped></style>
